<template>
    <MyHead title="忘记密码" :isrigth="false"> </MyHead>


    <div class="ForgitPassword">
        <van-form ref="fromLogin">
        <van-cell-group inset>
            <van-field v-model="params.tel" name="手机号" label="手机号" placeholder="手机号"
                :rules="[{ pattern: /^[1][3-9][0-9]{9}$/, message: '请填写正确的手机号' }]" />

                <van-field v-model="params.sms" type="number" center clearable label="短信验证码" placeholder="请输入短信验证码" :rules="[{ required: true, message: '请填写验证码' }]">
                    <template #button>
                        <van-button size="small" type="primary">发送验证码</van-button>
                    </template>
                </van-field>


            <div class="pwdtemplate">
                <van-field v-model="params.pwd" :type="iseys2 ? 'text' : 'password'" label="新密码" :rules="pwdrules"
                    @update:model-value="conpwdhandler" />
                <div class="eyes" @click="ispwdeyes2">
                    <span v-show="iseys2"><i class="iconfont icon-yanjing"></i></span>
                    <span v-show="!iseys2"><i class="iconfont icon-bukejian"></i></span>
                </div>
            </div>
        </van-cell-group>
    </van-form>

    <van-button class="rgpbtn" round block type="primary" native-type="submit">
        提交
    </van-button>
    </div>
</template>

<script setup>

import { ref, reactive } from 'vue';

let iseys1 = ref(false)
let iseys2 = ref(false)
let iseys3 = ref(false)
let PromptText = ref(false)

let params = reactive({
    oldpwd: '',
    pwd: '',
    conpwd: '',
})

//密码显隐
const ispwdeyes1 = () => {
    iseys1.value = !iseys1.value;
}
const ispwdeyes2 = () => {
    iseys2.value = !iseys2.value;
}
const ispwdeyes3 = () => {
    iseys3.value = !iseys3.value;
}



//确认密码验证函数
let conpwdhandler = () => {
    console.log(params.conpwd == params.pwd);
    if (params.conpwd == params.pwd || params.conpwd == '') {
        PromptText.value = false;
        return true
    } else {
        // fromLogin.value.validate()
        PromptText.value = true;
        return false
    }
}


//密码验证
let oldpwdrules = [
    { required: true, message: "请输入密码" },
    { pattern: /[\w]{6,20}/, message: '密码应为6-20位的数字字母下划线组成' },
]
let pwdrules = [
    { required: true, message: "请输入密码" },
    { pattern: /[\w]{6,20}/, message: '密码应为6-20位的数字字母下划线组成' },
    { validator: conpwdhandler }
]

//确实密码验证
let conpwdrules = [
    { validator: conpwdhandler, trigger: "onChange" }
]




</script>

<style lang="scss" scoped>
.PromptText {
    font-size: .3rem;
    margin: .3rem 0 .1rem .3rem;
    color: #777;
}

;

.pwdtemplate {
    display: flex;
    align-items: center
}

;

.rgpbtn{
    width: 80%;
    margin-left: 50%;;
    transform: translateX(-50%);
}

</style>